<script setup lang="ts">
import {addCompanyMember} from "~/api/user";
import test from "~/utils/test"


const formData = ref({})

const emits = defineEmits(['close'])
const close = ()=>{
	emits('close')
}
// 职位下拉option
const positionLst = ref([
  {value:1, label:"管理员"},
  {value:2, label:"员工"},
])

// 保存
const submit = async ()=>{
  if(!formData.value.nickName){
    return ElMessage.error('请输入成员姓名')
  }
  if(!formData.value.mobile){
    return ElMessage.error('请输入成员手机号码')
  }
  if(!test.mobile(formData.value.mobile)){
    return ElMessage.error('请输入正确的手机号码')
  }
  if(!formData.value.duties){
    return ElMessage.error('请选择职位')
  }
  try{
    await addCompanyMember(formData.value)
    close()
  }catch (e) {
    console.log(e)
  }
}
const fileListChange = (fileList)=>{
  console.log(fileList)
  if(fileList.length){
    formData.value.profilePic = fileList[0]
  }else{
    delete formData.value.profilePic
  }
}
</script>

<template>
	<div class="dialog">
		<div class="dialog-box">
			<div class="header">
				<div class="left">
					<img src="~/assets/dialog-icon.png" alt="">
					<span>添加新成员</span>
				</div>
				<img class="close" src="~/assets/modal-close.png" alt="" @click="close">
			</div>
			<div class="dialog-content">
				<el-form :model="formData" label-position="top">
          <el-form-item label="姓名" required>
            <el-input type="text" v-model="formData.nickName" placeholder="请输入成员姓名" style="height: 40px"/>
          </el-form-item>
					<el-form-item label="手机号码" required>
						<el-input type="number" v-model="formData.mobile" placeholder="请输入成员手机号码" style="height: 40px"/>
					</el-form-item>
					<el-form-item label="职位" required>
						<el-select v-model="formData.duties" placeholder="请选择职位">
							<el-option v-for="item of positionLst" :label="item.label" :value="item.value" :key="item.value"></el-option>
						</el-select>
					</el-form-item>
          <el-form-item label="成员头像">
            <UploadFile :upload-length="1" @fileList="fileListChange"/>
          </el-form-item>
				</el-form>
			</div>
			<div class="footer">
				<span class="btn" @click="close">取消</span>
				<span class="btn" @click="submit">保存</span>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.dialog {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(25, 30, 40, .4);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dialog-box {
	width: 400px;
	background: #FFFFFF;
	border-radius: 12px 12px 12px 12px;
	padding: 24px;

	.header {
		display: flex;
		align-items: center;
		padding-bottom: 20px;

		.left {
			flex: 1;
			display: flex;
			align-items: center;

			img {
				width: 20px;
				height: 20px;
				margin-right: 4px;
			}

			span {
				font-size: 16px;
				color: #191E28;
				font-weight: bold;
			}
		}

		.close {
			width: 18px;
			height: 18px;
			cursor: pointer;
		}
	}
	.footer{
		display: flex;
		padding: 32px 0 0;
		justify-content: flex-end;
		span{
			width: 92px;
			height: 36px;
			cursor: pointer;
		}
		.btn:nth-child(1){
			background: #FFFFFF;
			border-radius: 8px 8px 8px 8px;
			border: 1px solid rgba(25,30,40,0.08);
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(25,30,40,0.6);
			margin-right: 12px;
		}
		.btn:nth-child(2){
			background: #1DBF73;
			border-radius: 8px 8px 8px 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}
	}
	.dialog-content p{
		display: flex;
	}
	.textarea{
		margin-top: 10px;
		textarea{
			width: 100%;
			height: 96px;
			background: rgba(25, 30, 40, 0.02);
			border-radius: 12px 12px 12px 12px;
			border: 1px solid rgba(25, 30, 40, 0.08);
			padding: 16px;
			box-sizing: border-box;
			resize: none;
		}
	}
}

</style>

<style>
.dialog .el-select__wrapper{
	height: 40px;
}
.dialog .el-form--default.el-form--label-top .el-form-item .el-form-item__label{
	color: #191E28;
	font-weight: bold;
}
</style>